<!DOCTYPE html>

<html>
    <head>
        <meta charset="UTF-8">
        <title>动态组件</title>
        <style>
            .demo {
                font-family: sans-serif;
                border: 1px solid #eee;
                border-radius: 2px;
                padding: 20px 30px;
                margin-top: 1em;
                margin-bottom: 40px;
                user-select: none;
                overflow-x: auto;
            }

            .tab-button {
                padding: 6px 10px;
                border-top-left-radius: 3px;
                border-top-right-radius: 3px;
                border: 1px solid #ccc;
                cursor: pointer;
                background: #f0f0f0;
                margin-bottom: -1px;
                margin-right: -1px;
            }
            .tab-button:hover {
                background: #e0e0e0;
            }
            .tab-button.active {
                background: #e0e0e0;
            }
            .demo-tab {
                border: 1px solid #ccc;
                padding: 10px;
            }
        </style>
        <script src="vue@3.2.26.js"></script>
    </head>
    <body>

        <h3>动态组件(Vue官网举例)</h3>

        <div id="dynamic-component-demo" class="demo">
            <!-- 注意 v-on:click="currentTab = tab" 中的 tab 是个变量，不是字符串字面量 -->
            <button
               v-for="tab in tabs"
               v-bind:key="tab"
               v-bind:class="['tab-button', { active: currentTab === tab }]"
               v-on:click="currentTab = tab">
              {{ tab }}
            </button>
          
            <component v-bind:is="currentTabComponent" class="tab"></component>

          </div>

          <script>
              const app = Vue.createApp({
                data() {
                    return {
                        currentTab: 'Home',
                        tabs: ['Home', 'Posts', 'Archive']
                    }
                },
                computed: {
                    currentTabComponent() {
                        return 'tab-' + this.currentTab.toLowerCase()
                    }
                }
            });

            app.component('tab-home', {
                template: `<div class="demo-tab">Home component</div>`
            });

            app.component('tab-posts', {
                template: `<div class="demo-tab">Posts component</div>`
            });

            app.component('tab-archive', {
                template: `<div class="demo-tab">Archive component</div>`
            });

            app.mount('#dynamic-component-demo');

          </script>

        
    </body>
</html>